import { FC, useMemo } from 'react';

import { LoadState } from '../../../../types.ts';

import { useLabelStyles } from './styles.tsx';

interface IStatusLabelProps {
    loadState: LoadState
}
export const StatusLabel: FC<IStatusLabelProps> = ({ loadState }) => {
    const { styles } = useLabelStyles();
    const textStatus = useMemo(() => {
        if (loadState === 'offline') return 'Нажмите для подключения';
        if (loadState === 'loading') return 'Идёт подключение...';
        if (loadState === 'connected') return 'Подключено';
        return 'Не удалось подключиться';
    }, [loadState]);
    
    return (
        <div className={styles.status}>
            {textStatus}
        </div>
    );
};
